<template>
	<div>
		<vue-read-progress color="#32AAEA" opacity="0.5" height="3px" :shadow="true"></vue-read-progress>
		<el-row class="main" type="flex" justify="center">
			<el-col :span="16">
				<div id="artcle-info">
					<h2 class="text-center">{{title}}</h2>
					<!-- 描述：文章信息 -->
					<div class="text-center timeAndView">
						<span class="article-time">
							<i class="el-icon-time"></i>
							发表于：<span>{{dateTime}}</span>
						</span>
						&nbsp;|&nbsp;
						<span class="article-views">
							<i class="el-icon-view"></i>
							阅读量：<span>{{viewsNum}}</span>
						</span>
					</div>
					<p class="abstract">
						{{description}}
					</p>
				</div>
				<hr />
				<div class="artcle-content" v-highlight v-html="msg" style="white-space:pre-wrap" >   
				</div>
				<div id="statement">
					<div class="item">{{$t('article.author')}}：xiaoma</div>
					<div class="item">{{$t('article.originalLink')}}：
						<a href="http://x1aoma.top">http://x1aoma.top</a>
					</div>
					<div class="item">{{$t('article.copyright')}}：本博客所有文章除特别声明外,转载请注明出处!</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import "highlight.js/styles/github.css";
import VueReadProgress from "vue-read-progress";
	export default {
	components:{
	VueReadProgress
	},
	data() {
    return{
      title: '',
      dateTime:'',
      viewsNum: 0,
      description:''   
    }
  },
  created() {
  },
  methods: {  
    async showMd(){
      const _this= this
             this.$axios.get(`http://121.43.152.1:8081/api/getStrById/${_this.$route.query.aid}`).then(function (resp) {
			// this.$axios.get(`http://localhost:8081/api/getStrById/${_this.$route.query.aid}`).then(function (resp) {
			document.getElementById("artcle-info").style.backgroundImage="url("+resp.data.data.icon+")"
            _this.msg=  resp.data.data.str;
			_this.title=resp.data.data.title
			_this.dateTime=resp.data.data.dateTime
			_this.viewsNum=resp.data.data.viewsNum
			_this.description=resp.data.data.description
          })
          //强制重新渲染
        _this.key += 1 
    }
  },
  mounted(){
       this.showMd();
  }
	}
</script>

<style scoped>
	#artcle-info {
		padding: 20px;
		/* background-image: url(../assets/vue.jpg); */
		background-repeat: no-repeat;
		background-size: 100% 100%;     
		margin-bottom: 40px;
	}
	
	#artcle-info .abstract {
		color: #ffffff;
		border-left: 3px solid #F56C6C;
		padding: 10px;
		background-color: rgba(126, 129, 135, 0.3);
	}
	
	#artcle-info .timeAndView {
		padding: 20px;
		line-height: 30px;
		font-size: 16px;
		color: #ffffff;
	}
	
	pre.has {
		color: #ffffff;
		background-color: rgba(0, 0, 0, 0.8);
	}
	
	/* img.has {
		width: 100%;
	} */
	#artcle-content p img{
		width: 70%;
	}
	
	#statement {
		border-left: 3px solid #F56C6C;
		padding: 20px;
		background-color: #EBEEF5;
	}
</style>